<template>
  <view class="create-order">
    <view class="p-3 order-form-wrap">
      <u--form class="pl-3 pr-3 order-form-block" labelWidth="80" labelPosition="left" :model="orderForm" ref="form1">
        <u-form-item label="客户" prop="CustName">
          <u--input v-model="orderForm.CustName" disabled disabledColor="#fff" border="none">
          </u--input>
        </u-form-item>
        <u-form-item label="电话" prop="Tel">
          <u--input v-model="orderForm.Tel" border="none" disabled
            disabledColor="#fff"></u--input>
        </u-form-item>
        <u-form-item label="联系人" prop="Contact">
          <u--input v-model="orderForm.Contact" border="none" disabled
            disabledColor="#fff"></u--input>
        </u-form-item>
        <u-form-item label="地址" prop="Addr" labelWidth="55">
          <u--input v-model="orderForm.Addr" disabled disabledColor="#fff" border="none">
          </u--input>
        </u-form-item>
        <!-- <u-form-item label="详细地址" prop="Zone5">
          <u--input v-model="orderForm.Zone5" border="none" disabled
            disabledColor="#fff"></u--input>
        </u-form-item> -->
        <u-form-item label="方式" prop="RepairType">
          <u--input v-model="orderForm.RepairType" disabled disabledColor="#fff" border="none">
          </u--input>
        </u-form-item>
        <u-form-item label="下单" prop="CreateDate">
          <u--input v-model="orderForm.CreateDate" disabled disabledColor="#fff" border="none">
          </u--input>
        </u-form-item>
        <u-form-item label="预约" prop="AppointmentTime">
          <u--input v-model="orderForm.AppointmentTime" disabled disabledColor="#fff"
            border="none">
          </u--input>
        </u-form-item>
        <u-form-item label="派单" prop="AssDate">
          <u--input v-model="orderForm.AssDate" disabled disabledColor="#fff" border="none">
          </u--input>
        </u-form-item>
        <u-form-item label="状态" prop="StatusName">
          <u--input v-model="orderForm.StatusName" disabled disabledColor="#fff" border="none">
          </u--input>
        </u-form-item>
      </u--form>
      <view class="order-form-single">
        <view class="pl-3 pr-3 order-form-title flex justify-between align-center">
          <view>*下单记录</view>
        </view>
        <u--textarea placeholder="填写下单记录" confirmType="done" v-model="orderForm.Descr" disabled></u--textarea>
      </view>
      <view class="order-form-single"  v-if="imageList.length">
        <view class="pl-3 pr-3 order-form-title">图片</view>
        <u-upload :fileList="imageList" name="file" multiple :deletable="false"
          :maxCount="imageList.length"></u-upload>
      </view>
      <view class="sub-title formTitleRef_0">返工情况</view>

      <u--form class="pl-3 pr-3 order-form-block" labelWidth="80" labelPosition="left" :model="orderForm"
        :rules="orderRules" ref="form1">
        <u-form-item label="是否返工" prop="sex" borderBottom>
          <view class="flex justify-right">
            <u--input v-model="orderForm.A" disabled disabledColor="#fff" :placeholder="orderForm.IsFanGong? '返工': '非返工'" border="none">
          </u--input>
          </view>
        </u-form-item>
        <u-form-item label="返工工单" prop="FanGongRepairId">
          <u--input v-model="orderForm.FanGongRepairId" disabled disabledColor="#fff" placeholder="" border="none">
          </u--input>
        </u-form-item>
      </u--form>
      <view class="sub-title formTitleRef_0">派单记录</view>
      <u--form class="pl-3 pr-3 order-form-block" labelWidth="80" labelPosition="left" :model="orderForm"
        :rules="orderRules" ref="form1">
        <u-form-item v-if="orderForm.Employee1" :label="orderForm.Employee1" prop="VirtCharge1">
          <u--input v-model.number="orderForm.VirtCharge1" disabledColor="#fff" type="digit" @blur="chargeSummation" border="none">
          </u--input>
        </u-form-item>
        <u-form-item v-if="orderForm.Employee2" :label="orderForm.Employee2" prop="VirtCharge2">
          <u--input v-model.number="orderForm.VirtCharge2" disabledColor="#fff" type="digit" @blur="chargeSummation" border="none">
          </u--input>
        </u-form-item>
        <u-form-item v-if="orderForm.Employee3" :label="orderForm.Employee3" prop="VirtCharge3">
          <u--input v-model.number="orderForm.VirtCharge3" disabledColor="#fff" type="digit" @blur="chargeSummation" border="none">
          </u--input>
        </u-form-item>
        <u-form-item v-if="orderForm.Employee4" :label="orderForm.Employee4" prop="VirtCharge4">
          <u--input v-model.number="orderForm.VirtCharge4" disabledColor="#fff" type="digit" @blur="chargeSummation" border="none">
          </u--input>
        </u-form-item>
        <u-form-item v-if="orderForm.Employee5" :label="orderForm.Employee5" prop="VirtCharge5">
          <u--input v-model.number="orderForm.VirtCharge5" disabledColor="#fff" type="digit" @blur="chargeSummation" border="none">
          </u--input>
        </u-form-item>
        <u-form-item label="合计" prop="Expense01" borderBottom>
          <u--input v-model.number="orderForm.Expense01" type="digit" disabledColor="#fff" border="none" disabled>
          </u--input>
        </u-form-item>
      </u--form>

      <view class="sub-title formTitleRef_0">服务情况</view>

      <u--form class="pl-3 pr-3 order-form-block" labelWidth="80" labelPosition="left" :model="orderForm"
        :rules="orderRules" ref="form1">
        <u-form-item label="服务情况" prop="Repairdescr" borderBottom>
          <u--input v-model="orderForm.Repairdescr" disabledColor="#fff" placeholder="填写服务状况" border="none">
          </u--input>
        </u-form-item>

        <u-form-item label="业务员" prop="Saler" borderBottom @click="handleServicePick('Saler')">
          <u--input v-model="orderForm.Saler" disabled disabledColor="#fff" placeholder="选择业务员" border="none">
          </u--input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <u-form-item label="业务提成" prop="Expense02" borderBottom>
          <u--input v-model.number="orderForm.Expense02" type="digit" disabledColor="#fff" placeholder="输入业务提成"
            border="none">
          </u--input>
        </u-form-item>

      </u--form>

      <view class="sub-title formTitleRef_3">费用明细</view>
      <u--form class="pl-3 pr-3 order-form-block" labelWidth="80" labelPosition="left" :model="orderForm"
        :rules="orderRules" ref="form1">
        <u-form-item label="服务费" prop="Revenue01" borderBottom>
          <u--input v-model.number="orderForm.Revenue01" type="digit" @blur="revenueSummation" disabledColor="#fff"
            placeholder="填写服务金额" border="none">
          </u--input>
        </u-form-item>
        <u-form-item label="销售商品" prop="Revenue02" borderBottom>
          <u--input v-model.number="orderForm.Revenue02" type="digit" @blur="revenueSummation" disabledColor="#fff"
            placeholder="填写销售商品金额" border="none">
          </u--input>
        </u-form-item>
        <u-form-item label="搬运费" prop="Revenue03" borderBottom>
          <u--input v-model.number="orderForm.Revenue03" type="digit" @blur="revenueSummation" disabledColor="#fff"
            placeholder="填写销售商品金额" border="none">
          </u--input>
        </u-form-item>
        <u-form-item label="家具拆装费" prop="Revenue04" labelWidth="100" borderBottom>
          <u--input v-model.number="orderForm.Revenue04" type="digit" @blur="revenueSummation" disabledColor="#fff"
            placeholder="填写销售商品金额" border="none">
          </u--input>
        </u-form-item>
        <u-form-item label="超重费" prop="Revenue05" borderBottom>
          <u--input v-model.number="orderForm.Revenue05" type="digit" @blur="revenueSummation" disabledColor="#fff"
            placeholder="填写销售商品金额" border="none">
          </u--input>
        </u-form-item>
        <u-form-item label="合计" prop="TotalRevenue">
          <u--input v-model.number="orderForm.TotalRevenue" type="digit" disabled disabledColor="#fff"
            placeholder="合计金额" border="none">
          </u--input>
        </u-form-item>
      </u--form>
      <u--form class="pl-3 pr-3 order-form-block" labelWidth="80" labelPosition="left" :model="orderForm" ref="form1">
        <u-form-item label="服务提成" prop="Expense01" borderBottom>
          <u--input v-model.number="orderForm.Expense01" type="digit" disabled disabledColor="#fff" placeholder=""
            border="none">
          </u--input>
        </u-form-item>
        <u-form-item label="业务提成" prop="Expense02" borderBottom>
          <u--input v-model.number="orderForm.Expense02" type="digit" @blur="expensesSummation" disabled
            disabledColor="#fff" placeholder="" border="none">
          </u--input>
        </u-form-item>
        <u-form-item label="商品成本" prop="Expense03" borderBottom>
          <u--input v-model.number="orderForm.Expense03" type="digit" @blur="expensesSummation" disabledColor="#fff"
            placeholder="0" border="none">
          </u--input>
        </u-form-item>
        <u-form-item label="停车费" prop="Expense04" borderBottom>
          <u--input v-model.number="orderForm.Expense04" type="digit" @blur="expensesSummation" disabledColor="#fff"
            placeholder="0" border="none">
          </u--input>
        </u-form-item>
        <u-form-item label="过路费" prop="Expense05" borderBottom>
          <u--input v-model.number="orderForm.Expense05" type="digit" @blur="expensesSummation" disabledColor="#fff"
            placeholder="0" border="none">
          </u--input>
        </u-form-item>
        <u-form-item label="合计" prop="TotalExpense">
          <u--input v-model.number="orderForm.TotalExpense" type="digit" disabled disabledColor="#fff"
            placeholder="合计金额" border="none">
          </u--input>
        </u-form-item>
      </u--form>

      <u-button @click="handleOrderAdd" color="#F65D30" shape="circle" text="保存"></u-button>
    </view>

    <u-popup :show="showAddress" mode="center" :round="5">
      <view class="order-popup">
        <view class="popup-title">地址智能识别</view>
        <u-form-item prop="name" borderBottom>
          <u--input v-model="addrText" border="none" placeholder="粘贴整段内容，自动识别姓名、号码、地址"></u--input>
        </u-form-item>
        <view class="popup-tip">如：张三，138273628372，广东省深圳市盐田区九号小区3栋106</view>
        <view class="btns">
          <view class="mr-3 f-1">
            <u-button @click="showAddress = false" :plain="true" color="#F65D30" shape="circle" text="取消"></u-button>
          </view>
          <view class="ml-3 f-1">
            <u-button @click="handleAddrIdentify" color="#F65D30" shape="circle" text="确认"></u-button>
          </view>
        </view>
      </view>
    </u-popup>

    <u-popup :show="showSalesman" mode="center" :round="5">
      <view class="order-popup">
        <view class="popup-title">选择员工</view>
        <u-search bgColor="#eef0f6" color="#9faac0" placeholderColor="#9faac0" placeholder="请输入员工名称" :show-action="false"
          shape="square" searchIcon="" @search="handleEmployeeSearch" v-model="employeeParams.EmpName"></u-search>

        <view class="order-radio">
          <u-radio-group v-model="orderForm[currEmployee]" :borderBottom="true" placement="column" iconPlacement="right"
            activeColor="#F65D30" inactiveColor="#fff">
            <u-list @scrolltolower="scrolltoEmployeeLower" height="240">
              <u-list-item v-for="(item, index) in employeeList" :key="index">
                <u-radio :customStyle="{ marginBottom: '16px' }" :label="item.EmpName" :name="item.EmpName">
                </u-radio>
              </u-list-item>
            </u-list>
          </u-radio-group>
        </view>
        <view class="btns">
          <view class="mr-3 f-1">
            <u-button @click="() => (showSalesman = false)" :plain="true" color="#F65D30" shape="circle"
              text="取消"></u-button>
          </view>
          <view class="ml-3 f-1">
            <u-button @click="
              () => {
                orderForm[currEmployee] = '';
              }
            " :plain="true" color="#F65D30" shape="circle" text="清空"></u-button>
          </view>
        </view>
      </view>
    </u-popup>

    <!-- <u-popup :show="showSalesmanCommission" mode="center" :round="5" >
			<view class="order-popup">
				<view class="popup-title">填写提成金额</view>
				<u-search bgColor="#eef0f6" color="#9faac0" placeholderColor="#9faac0" placeholder="请输入业务员提成金额"
					:show-action="false" shape="square" searchIcon="" v-model="keyword"></u-search>

				<view class="btns">
					<view class="mr-3 f-1">
						<u-button @click="handleRepairDoneSave" :plain="true" color="#F65D30" shape="circle"
							text="取消"></u-button>
					</view>
					<view class="ml-3 f-1">
						<u-button @click="handleRepairDone" color="#F65D30" shape="circle" text="确定"></u-button>
					</view>
				</view>
			</view>
		</u-popup> -->
  </view>
</template>

<script src="./OrderAudit.js"></script>

<style lang="scss">
.create-order {
  .create-order-tabs {
    background-color: #fff;
  }

  .sub-title {
    color: $s-manager-color;
    font-size: 28rpx;
    margin-bottom: 24rpx;
  }

  ::v-deep .u-form-item__body__right__message {
    text-align: right;
  }

  .order-form-wrap {
    .order-form-single {
      background-color: #fff;
      box-shadow: $s-bg-shadow;
      border-radius: $s-border-radius;
      margin-bottom: 30rpx;

      .order-form-title {
        color: #f43030;
        font-size: 30rpx;
        background-color: #fff7f5;
        padding-top: 24rpx;
        padding-bottom: 24rpx;
      }

      ::v-deep .u-textarea {
        border-color: transparent !important;
        padding: 20rpx 30rpx;
        border-radius: 0;
      }

      ::v-deep .u-textarea--disabled {
        background-color: #fff;
      }

      ::v-deep .u-upload__wrap {
        padding: 30rpx;
        border-radius: 16rpx;

        .u-upload__button {
          background-color: #fff7f5;

          .u-icon__icon {
            color: $s-manager-color !important;
            font-size: 80rpx !important;
            line-height: 80rpx !important;
          }
        }
      }
    }

    .order-form-block {
      background-color: #fff;
      box-shadow: $s-bg-shadow;
      border-radius: $s-border-radius;
      margin-bottom: 30rpx;

      .service-staff {
        width: 108px;
        height: 28px;
        border-radius: 14px;
      }

      .justify-right {
        justify-content: right;
        width: 100%;
      }

      ::v-deep .uni-input-wrapper {
        .uni-input-input {
          text-align: right;
        }

        .input-placeholder {
          text-align: right;
          color: #808080;
        }
      }

      ::v-deep .u-form-item__body__left__content__label {
        color: #222;
        font-size: 30rpx;
      }
    }
  }

  .order-popup {
    width: 600rpx;
    padding: 25rpx 30rpx;

    .popup-title {
      color: #333;
      font-weight: bold;
      font-size: 28rpx;
      margin-bottom: 30rpx;
    }

    ::v-deep .uni-input-wrapper {
      .uni-input-input {
        text-align: left;
      }

      .input-placeholder {
        text-align: left;
        color: #808080;
      }
    }

    .popup-tip {
      margin-top: 20rpx;
      color: #555;
      font-size: 22rpx;
    }

    .btns {
      display: flex;
      justify-content: center;
      width: 100%;
      padding: 20rpx 0;
      margin-top: 30rpx;
      background-color: #fff;

      ::v-deep .u-button {
        margin: 0;
      }
    }

    .order-radio {
      padding: 20rpx;
      margin-top: 30rpx;
      // ::v-deep .uicon-checkbox-mark{
      // 	color:#F65D30 !important;
      // }
    }
  }
}
</style>
